<template>
   <div>
        <el-dialog title="创建用户" :visible.sync="isShow" width="40%"
          :before-close="handleClose">
          <el-form  label-width="170px" :rules="rules" :model="formData" ref="formData" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.email" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="formData.role" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="权限组名称">
              <el-select v-model="formData.permission_group_id" style="width:70%" placeholder="请选择" >
                  <el-option 
                    v-for="item in hireType" 
                    :key="item.id" 
                    :label="item.title" 
                    :value="item.id"
                  />
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="formData.phone" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="介绍">
              <el-input v-model="formData.avatar" style="width:70%"></el-input>
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item> -->
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="isShow = false;formData={}">取 消</el-button>
            <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
          </span>
        </el-dialog>
   </div>
</template>

<script>
import {getpermissions} from '@/api/permissions'
import {dataappuser} from '@/api/users'
export default {
name: 'addUsers',
components: {},
props: {},
data() {
  return {
    hireType:[],
    isShow: false,
    formData: {
      username: '',
      email: '',
      phone: '',
      role: '',
      permission_group_id: '',
      avatar: '',
      id:''
    },
    rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 2, max: 8, message: '用户姓名为2-8位'}
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }
        ]
      },
  };
},
methods: {
  handleClose(done) {
    this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {});
  },
  async getpermissions(){
      const res=await getpermissions()
      this.hireType=res.list
      console.log(this.hireType);
  },
  dataappuser(data){
      const res=dataappuser(data)
      console.log(res);
  },
  dataForm(res){
      console.log(123123);
      console.log(res);
      this.formData={
        username: res.username,
        email: res.email,
        phone: res.phone,
        role: res.role,
        permission_group_id: res.permission_group_id,
        avatar: res.avatar,
        id:res.id
      }
  },
 async submitForm(formName) {
     this.$refs[formName].validate((valid) => {
      if (valid) {

      } else {
        console.log('error submit!!');
        return false;
      }
      
    });
    const data = JSON.parse(JSON.stringify(this.formData))
    await this.dataappuser(data)
              // 3. 成功提示，失败处理
    this.$message.success('添加成功')
        // 4. 列表更新(子父通信)
    this.$emit('update-list')
        // 5. 表单重置、关闭
    this.isShow = false
  },
},
computed: {},
watch: {},
created () {
    this.getpermissions()
},
mounted () {},
}
</script>
<style lang='less' scoped>

</style>